<template>
  <div>
    <input placeholder="输入关键字搜索" v-model.trim="name" type="text" />
    <TanLe
      :shuju="records"
      @indexId="indexIdFn"
      :name="name"
      @search="searchFn"
    ></TanLe>
    <DisTance
      :visible="isShow"
      @update:visible="isShow = $event"
      :value="arr"
    ></DisTance>
  </div>
</template>

<script>
import TanLe from "./components/TanLe.vue";
import DisTance from "./components/DisTance.vue";

export default {
  components: {
    TanLe,
    DisTance,
  },
  data() {
    return {
      newArr: [
        {
          date: "2022-01-01",
          doctor: "张三",
          diagnosis: "感冒",
          prescription: "感冒药",
        },
        {
          date: "2022-02-01",
          doctor: "李四",
          diagnosis: "头疼",
          prescription: "止疼药",
        },
        {
          date: "2022-03-01",
          doctor: "王五",
          diagnosis: "腰痛",
          prescription: "止痛贴",
        },
      ],
      records: [
        {
          date: "2022-01-01",
          doctor: "张三",
          diagnosis: "感冒",
          prescription: "感冒药",
        },
        {
          date: "2022-02-01",
          doctor: "李四",
          diagnosis: "头疼",
          prescription: "止疼药",
        },
        {
          date: "2022-03-01",
          doctor: "王五",
          diagnosis: "腰痛",
          prescription: "止痛贴",
        },
      ],
      isShow: false,
      arr: [],
      name: "",
    };
  },
  methods: {
    indexIdFn(index) {
      this.arr = [];
      this.isShow = true;
      this.arr = [this.records[index]];
    },
    searchFn(item) {
      if (!this.name) {
        this.records = this.newArr;
      } else {
        return (this.records = [item]);
      }
    },
  },
  watch: {
    name(value) {
      if (!value) {
        return (this.records = this.newArr);
      } else {
        return (this.records = this.newArr.filter((item) => {
          for (let k in item) {
            if (value === item[k]) {
              return item;
            }
          }
        }));
      }
    },
  },
};
</script>

<style scoped></style>
